<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星空按钮</title>
</head>
<style>
	body {
	    height: 100vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #e8e8e8;
	}
	
	.box {
	    --clr-shadow__border: #d9a1ff;
	    --clr-text: #F6F4EB;
	    --clr-space: #120e1e;
	    --clr-space-gr: #271950;
	    --clr-star: #E9F8F9;
	    --size: 3rem;
	    position: relative;
	    outline: 1px solid var(--clr-shadow__border);
	}
	
	.button {
	    font-weight: 600;
	    font-size: 1.5rem;
	    letter-spacing: 0.2rem;
	    background: transparent;
	    padding: calc(var(--size) / 3) var(--size);
	    border: none;
	    cursor: pointer;
	    color: var(--clr-text);
	    text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),
	        -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);
	}
	
	.space {
	    width: 100%;
	    height: 100%;
	    bottom: 0%;
	    gap: 1.5rem;
	    transition: 0.5s ease-in-out;
	    z-index: -1;
	    opacity: 0;
	    overflow: hidden;
	    position: absolute;
	    display: flex;
	    background: linear-gradient(160deg, var(--clr-space), var(--clr-space-gr));
	}
	
	.box:hover .space {
	    opacity: 1;
	}
	
	.star {
	    height: 4rem;
	    width: 0.3rem;
	    transition: 0.5s;
	    border-radius: 50px;
	    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
	    position: relative;
	    background-color: var(--clr-star);
	    animation: space-animation calc(0.1s * var(--i)) linear infinite;
	}
	
	@keyframes space-animation {
	    0% {
	        transform: rotate(-30deg) translateY(calc(-52% * var(--i)));
	    }
	
	    100% {
	        transform: rotate(-30deg) translateY(calc(52% * var(--i)));
	    }
	}
</style>
<body>
    <div class="box">
        <button class="button">SPACE</button>
        <div class="space">
            <span style="--i: 31" class="star"></span>
            <span style="--i: 12" class="star"></span>
            <span style="--i: 57" class="star"></span>
            <span style="--i: 93" class="star"></span>
            <span style="--i: 23" class="star"></span>
            <span style="--i: 70" class="star"></span>
            <span style="--i: 6" class="star"></span>
        </div>
    </div>
</body>

</html>